<template>
  <view class="container">
    <view @click="focus" class="main">
      <textarea
        :placeholder="placeholder"
        v-model="value"
        :focus="first"
        @blur="blur"
        auto-height
        class="textarea"
        :maxlength="max"
        @input="input"
      ></textarea>
    </view>
    <view class="detail">
      <span class="length">{{ length }}/{{ max }}</span>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    max: {
      type: Number,
      default: () => 64,
    },
    placeholder: {
      type: String,
    }
  },
  name: "ty-textarea",
  data() {
    return {
      value: "",
      first: false,
    };
  },
  computed: {
    length() {
      return this.value.length;
    }
  },
  methods: {
    input() {
      this.$emit('input', this.value);
    },
    focus() {
      this.first = true;
    },
    blur() {
      this.first = false;
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  display: flex;
  background: white;
  flex-direction: column;
}
.main {
  width: 100%;
  min-height: 360rpx;
  padding: 32rpx 24rpx;
  box-sizing: border-box;
}
.textarea {
  width: 100%;
  height: auto;
  font-size: 48rpx;
  font-weight: 200;
}

.detail {
  height: 48rpx;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
}
</style>